<template>
  <el-container class="home-container">
    <el-header>
      <div class="left">
        <img src="../../assets/logo.png" alt />
        <span>主观题智能阅卷系统</span>
      </div>
      <div class="right">
        <el-avatar icon="el-icon-user-solid"></el-avatar>

        <el-dropdown @command="nav">
          <span class="el-dropdown-link">
            开发者
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- 好像不能直接写@click -->
            <el-dropdown-item command="/adminhome">系统管理</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-button icon="el-icon-switch-button" @click="logout()">退出</el-button>
      </div>
    </el-header>

    <el-container>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/admin/developer' }">开发者首页</el-breadcrumb-item>
          <el-breadcrumb-item>作业{{questionId}}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
          <!-- 作业列表 -->
          <!-- border加边框 -->
          <!-- stripe隔行变色 -->

          <el-table :data="homeworklist" style="width: 100%">
            <el-table-column label="作业ID" prop="id"></el-table-column>
            <el-table-column label="出题者" prop="author"></el-table-column>
            <el-table-column label="答题者" prop="person"></el-table-column>
            <el-table-column label="答题时间" prop="time"></el-table-column>
            <el-table-column label="得分" prop="score" align="center"></el-table-column>
          </el-table>

          <el-row>
            <el-col :span="12">
              <el-form :model="form" label-width="80px">
                <el-form-item label="标准答案">
                  <el-input
                    type="textarea"
                    v-model="form.standard_ans"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="用户回答">
                  <el-input
                    type="textarea"
                    v-model="form.user_ans"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                  ></el-input>
                </el-form-item>
              </el-form>

              <!-- <el-table :data="keysData" style="width: 100%" :row-class-name="highlight">
                <el-table-column prop="key" label="关键词" align="center"></el-table-column>
                <el-table-column prop="score" label="分值" align="center"></el-table-column>
              </el-table>-->

              <div id="main" style="width:600px; height:400px;"></div>
            </el-col>
            <el-col :span="11" :offset="1">
              <div v-for="(item,index) in info" :key="index" class="des">
                <i :class="'iconfont icon-'+ item.pic"></i>
                <span>{{item.title}}</span>
                <span class="num">{{item.num}}</span>
                <el-progress type="circle" :percentage="Number(per)" v-if="index == 0"></el-progress>
              </div>
            </el-col>
          </el-row>

          <div class="fenci">
            <div class="topcol">RightAnswer分词</div>
            <div class="concol">
              <el-tag v-for="(item,index) in rightwords" :key="index" type="success">{{item}}</el-tag>
            </div>
          </div>

          <div class="fenci">
            <div class="topcol b">UserAnswer分词</div>
            <div class="concol">
              <el-tag v-for="(item,index) in userwords" :key="index" type="warning">{{item}}</el-tag>
            </div>
          </div>

          <div class="fenci">
            <div class="topcol c">Question分词</div>
            <div class="concol">
              <el-tag v-for="(item,index) in questionwords" :key="index">{{item}}</el-tag>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      homeworklist: [
        {
          id: '',
          author: '',
          person: '',
          time: '',
          score: 7
        }
      ],
      questionId: 1,
      uid: null,
      keyWords: [],
      keyScore: [],
      userKeyScore: [],

      rightwords: [
        '企业',
        '信息化',
        '存在',
        '的',
        '问题',
        '：',
        '条码',
        '的',
        '缺失',
        '、',
        'EDI',
        '应用',
        '没有',
        '开展',
        '、',
        '网络',
        '技术',
        '尚',
        '不',
        '成熟',
        '、',
        '物流',
        '软件',
        '使用',
        '不足',
        '、',
        '企业',
        '规模',
        '影响',
        '信息化',
        '应用',
        '。'
      ],
      userwords: [
        '企业',
        '信息化',
        '存在',
        '条码',
        '的',
        '缺失',
        '、',
        'EDI',
        '应用',
        '效果',
        '差',
        '、',
        '网络',
        '技术',
        '尚',
        '不',
        '成熟',
        '、',
        '企业',
        '规模',
        '影响',
        '信息化',
        '应用',
        '等',
        '问题',
        '。'
      ],
      questionwords: ['企业', '信息化', '存在', '什么', '问题', '？'],

      keysData: [
        // {
        //   key: '关键词1',
        //   score: 2
        // },
        // {
        //   key: '关键词2',
        //   score: 2
        // },
        // {
        //   key: '关键词3',
        //   score: 2
        // }
      ],
      info: [
        {
          pic: 'yuanbingtutubiao',
          title: 'Prob',
          num: ''
        },
        {
          pic: 'jiazaizhong',
          title: 'Time',
          num: ''
        },
        {
          pic: 'shuju',
          title: 'RAM',
          num: ''
        },
        {
          pic: 'CPU1',
          title: 'Cpu',
          num: ''
        }
      ],
      form: {
        standard_ans: '',
        user_ans: ''
      },
      hid: this.$route.params.id,
      num: [],
      homeworkname: '',
      list: [],
      per: '',
      indi: [],
      option: {
        title: {
          text: '得分点相似度'
        },
        tooltip: {},
        legend: {
          // show: true,
          // data: ['风险评估']
        },
        radar: {
          // shape: 'circle',
          splitNumber: 4,
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [5, 5]
            }
          },
          indicator: [
            {
              name: '攻击途径',
              max: 10
            },
            {
              name: '攻击难度',
              max: 10
            },
            {
              name: '权限要求',
              max: 10
            },
            {
              name: '机密性影响',
              max: 10
            },
            {
              name: '完整性影响',
              max: 10
            },
            {
              name: '可用性影响',
              max: 10
            }
          ]
        },
        series: [
          {
            name: '风险评估',
            type: 'radar',
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.7
              }
            },
            data: [
              {
                itemStyle: {
                  normal: {
                    color: '#67abff',
                    lineStyle: {
                      color: '#67abff'
                    }
                  }
                },
                value: [3, 5, 8, 9, 10, 8]
              }
            ]
          }
        ]
      },

      userKeySimilarity: [100, 37.8, 100, 0, 100]
    }
  },
  created() {
    this.getDetail()
  },
  mounted() {
    this.$nextTick(() => {
      this.drawMap()
    })
  },
  watch: {
    //观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.drawMap()
        } else {
          this.drawMap()
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },
  methods: {
    drawMap() {
      console.log(this.indi)
      var myChart = this.$echarts.init(document.getElementById('main'))
      myChart.setOption(this.option)
    },

    logout() {
      window.sessionStorage.clear()
      this.$store.commit('clear')
      this.$router.push('/login')
    },
    // 获取所有的菜单，从后端
    async getDetail() {
      // 取出的data重命名为res
      console.log(this.$route.params.id)

      // post请求出错
      const { data: res } = await this.$http.get('user/answer/getAnswer/17')
      if (res.code !== 200) return this.$message.error('失败！')

      this.homeworkname = Object.keys(res.data)[0]

      this.list = res.data[this.homeworkname]

      this.homeworklist[0].id = this.list.id
      this.homeworklist[0].author = this.list.teacherName
      // 获取具体名字
      this.uid = this.list.userId
      this.getName(this.uid)
      this.homeworklist[0].time = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
        this.list.answerTime
      )[0]
      this.homeworklist[0].score = '6'

      console.log(this.homeworklist)

      // keysData
      this.keyWords = [
        '条码的缺失',
        'EDI应用没有开展',
        '网络技术尚不成熟',
        '物流软件使用不足',
        '企业规模影响信息化应用'
      ]
      this.keyScore = [2, 2, 2, 2, 2]
      this.toKeyData(this.keyWords, this.keyScore)
      this.userKeyScore = [2, 0, 2, 0, 2]

      this.toData(this.keyWords)

      this.option.series[0].data[0].value = this.userKeySimilarity

      // info
      this.num = [100, 0, 100, 0, 100]
      console.log(this.num)
      var sum = 0
      for (var p of this.num) {
        sum += parseFloat(p)
      }
      console.log(this.indi)

      // 缺一个整体的相似度

      // this.info[0].num = parseFloat(sum/this.num.length).toFixed(1)  // *100取决于相似度的取值
      this.per = '71.26'
      this.info[0].num = '71.26%'
      this.info[1].num = '44.08ms'
      // this.info[2].num = parseFloat(this.list.memoryCost).toFixed(1) + 'MB'
      this.info[2].num = '85.1KB'
      this.info[3].num = '55.0%'

      // form
      this.form.standard_ans =
        '企业信息化存在的问题：条码的缺失、EDI 应用没有开展、网络技术尚不成熟、物流软件使用不足、企业规模影响信息化应用。'
      this.form.user_ans =
        '企业信息化存在条码的缺失、EDI 应用效果差、网络技术尚不成熟、企业规模影响信息化应用等问题。'
    },

    // 获取
    async getParam(id) {
      const { data: res } = await this.$http.post(
        'user/answer/getAnswerParam/' + id
      )
      if (res.code !== 200) return this.$message.error('获取失败')
    },

    // 获取姓名
    async getName(id) {
      const { data: res } = await this.$http.get('user/getUser/' + id)
      if (res.code !== 200) return this.$message.error('获取失败')
      this.homeworklist[0].person = res.data.userName
    },

    toKeyData(arr1, arr2) {
      for (var i = 0; i < arr1.length; i++) {
        this.keysData.push({
          key: arr1[i],
          score: parseInt(arr2[i])
        })
      }
    },

    // 表
    toData(arr) {
      for (var i = 0; i < arr.length; i++) {
        this.indi.push({
          max: 100,
          name: arr[i]
        })
      }
      this.option.radar.indicator = this.indi
    },

    // 高亮未答对地方
    highlight({ row, rowIndex }) {
      if (row.score > this.userKeyScore[rowIndex]) {
        return 'high-row'
      }
    },

    // 跳转页面
    nav(command) {
      this.$router.push(command)
    },

    //
    navdetail() {
      // 之后加上id，动态路由跳转
      this.$router.push('/admin/devdetail/')
    }
  }
}
</script>

<style lang="less" scoped>
// #main {
//   margin-top: 100px;
// }

.fenci {
  margin-bottom: 20px;
}

.topcol {
  background: green;
  text-align: center;
  color: white;
}

.b {
  background: red;
}

.c {
  background: blue;
}

.concol {
  border: 3px solid #dcdfe6;
  display: flex; //与flex=1匹配
  flex-wrap: wrap; //换行
  padding: 10px 20px;
  letter-spacing: 5px;
  /deep/ .el-tag {
    display: inline-block;
    min-width: 80px;
    text-align: center;
    flex: 1;
    margin: 5px 10px;
  }
}

.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}

/deep/ .high-row {
  background-image: linear-gradient(
    to top,
    #fdcbf1 0%,
    #fdcbf1 1%,
    #e6dee9 100%
  ) !important;
  color: red;
}

.el-table {
  margin-bottom: 30px;
}

.des {
  height: 100px;
  margin-top: 30px;
  span {
    display: inline-block;
    width: 150px;
    font-size: 25px;
  }
  .num {
    font-weight: 1000;
    font-size: 30px;
    margin-right: 10px;
  }
  .iconfont {
    font-size: 30px;
  }

  .el-progress {
    vertical-align: -14px;
    margin-left: -25px;
    /deep/ .el-progress__text {
      font-size: 12px !important;
    }
  }

  /deep/ .el-progress-circle {
    width: 50px !important;
    height: 50px !important;
  }
}

.el-menu {
  .el-menu-item {
    text-align: center;
  }
  .el-menu-item.is-active {
    background: #1aad19 !important;
  }
}

.sty {
  // font-weight: bold;
  font-size: 20px;
}

.home-container {
  //   height: 100%;
  width: 80%;
  margin-left: 10%;
  background: #f0f0f2;
}

.el-container {
  margin-top: 15px;
}

.el-header {
  background-color: white;
  // margin-left: 10%;
  // width: 80%;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: black;
  font-size: 20px;
  .left {
    display: flex;
    align-items: center;
    margin-left: 10px;
    img {
      width: 5%;
      height: 5%;
    }
    span {
      margin-left: 15px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .el-dropdown {
      span {
        font-size: 15px;
        white-space: nowrap;
      }
    }
  }
}

.el-button {
  margin-left: 50px;
  font-size: 15px;
  // background: white;
  border: none;
}
.el-avatar {
  margin-right: 50px;
}

.el-main {
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;

  // background-image: url("../assets/微信图片_20191012142541.jpg");
  // background-size: 1336px 694.4px;
}

.iconfont {
  margin-right: 30px;
}
</style>